<template>
<div 
  @dragenter.stop="handleDragEnter"
  @dragover.stop="handleDragOver"
  @dragleave.stop="handleDragLeave"
  @drop.stop="handleDrop"
  class="work">
  <span>{{title}}</span>
  <p>{{workMessage.time}}</p>
</div>
</template>

<script>
export default {
  name: "date",
  data() {
    return {};
  },
  props: {
    workMessage:{
      type:Object,
      required:true,
    },
    shared: {
      type: Object,
      default: () => ({})
    }
  },
  computed:{
    title(){
      if(this.workMessage.worker){
        return this.workMessage.worker;
      }else{
        return this.workMessage.date
      }
      
    }
  },
  methods:{
    isAllowedToDrop () {
      if (this.workMessage.date) {
        return false
      }
      return true
    },
    revertClass () {
      this.$el.classList.remove('drop-allowed', 'drop-not-allowed')
    },
    handleDragEnter(){
      this.$el.classList.add(this.isAllowedToDrop() ? 'drop-allowed' : 'drop-not-allowed')
    },
    handleDragOver(e){
      e.preventDefault();
    },
    handleDragLeave(){
      this.revertClass();
    },
    handleDrop(){
      this.revertClass();
      if (!this.isAllowedToDrop()) return;
      const { draggingVm } = this.shared;
      this.workMessage.worker=draggingVm.classes.worker;
      this.workMessage.time=draggingVm.classes.time;
      this.shared.draggingVm = null
    }
  }
};
</script>

<style lang="scss">
  .work{
    float: left;
    height: 60px;
    width: 100px;
    border: 1px solid ;
    text-align: center;
  }
  .drop-allowed{
    background: yellow;
  }
  .drop-not-allowed{
    background: #ccc;
  }
</style>
